<template>
  <div>
    <div>
    <!--头部样式-->
    <NavBar style="z-index: 10;">
      <van-icon slot="left" name="arrow-left" @click="goBack"/>
      <div slot="title" class="van-nav-bar__title van-ellipsis">{{schoolName}}</div>
    </NavBar>

    <!--搜索-->
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      show-action
      shape="round"
      @search="onSearch"
    >
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>
    </div>
    <van-tabs @click="tabsOnClick" v-model="active">
      <van-tab title="全部商品" >
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-grid :border="false" :column-num="2" style="background:#e2e2e2;">
            <van-grid-item style="padding:2px;" v-for="(splist, index) of goodsList" :key="index" >
              <div @click="goDetail(splist.goodsId)" style="display: inline-grid;">
                <div style="margin-bottom: 5px;">
                  <van-image v-if="splist.goodsUrl != null" :src="IMG_SERVICE_ADDR + splist.goodsUrl"> </van-image>
                  <van-image v-else :src="errorImg"> </van-image>
                </div>
                <div class="show-bottom">
                  <p class="p2">{{splist.goodsName}}</p>
                </div>
                <div class="show-bottom">
                  <p class="p3">￥{{splist.goodsPrices}}</p>
                </div>
                <div class="goods-tag">
                  <van-tag plain type="danger">{{splist.sexTypeName}}款</van-tag>
                  <van-tag plain type="primary">{{splist.goodsTypeName}}</van-tag>
                  <van-tag plain type="success">{{splist.seasonTypeName}}</van-tag>
                </div>
              </div>
            </van-grid-item>
          </van-grid>
        </van-list>
      </van-tab>
      <van-tab title="男装">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-grid :border="false" :column-num="2" style="background:#e2e2e2;">
            <van-grid-item style="padding:2px;" v-for="(splist, index) of goodsList" :key="index" >
              <router-link :to='{path: "/goodsDetail", query: {goodsId:splist.goodsId}}' style="margin-bottom: 5px;">
                <van-image v-if="splist.goodsUrl != null" :src="IMG_SERVICE_ADDR + splist.goodsUrl"> </van-image>
                <van-image v-else :src="errorImg"> </van-image>
              </router-link>
              <div class="show-bottom">
                <p class="p2">{{splist.goodsName}}</p>
              </div>
              <div class="show-bottom">
                <p class="p3">￥{{splist.goodsPrices}}</p>
              </div>
              <div class="goods-tag">
                <van-tag plain type="danger">{{splist.sexTypeName}}款</van-tag>
                <van-tag plain type="primary">{{splist.goodsTypeName}}</van-tag>
                <van-tag plain type="success">{{splist.seasonTypeName}}</van-tag>
              </div>
            </van-grid-item>
          </van-grid>
        </van-list>
      </van-tab>
      <van-tab title="女装">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-grid :border="false" :column-num="2" style="background:#e2e2e2;">
            <van-grid-item style="padding:2px;" v-for="(splist, index) of goodsList" :key="index" >
              <router-link :to='{path: "/goodsDetail", query: {goodsId:splist.goodsId}}' style="margin-bottom: 5px;">
                <van-image v-if="splist.goodsUrl != null" :src="IMG_SERVICE_ADDR + splist.goodsUrl"> </van-image>
                <van-image v-else :src="errorImg"> </van-image>
              </router-link>
              <div class="show-bottom">
                <p class="p2">{{splist.goodsName}}</p>
              </div>
              <div class="show-bottom">
                <p class="p3">￥{{splist.goodsPrices}}</p>
              </div>
              <div class="goods-tag">
                <van-tag plain type="danger">{{splist.sexTypeName}}款</van-tag>
                <van-tag plain type="primary">{{splist.goodsTypeName}}</van-tag>
                <van-tag plain type="success">{{splist.seasonTypeName}}</van-tag>
              </div>
            </van-grid-item>
          </van-grid>
        </van-list>
      </van-tab>
      <van-tab title="上衣">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-grid :border="false" :column-num="2" style="background:#e2e2e2;">
            <van-grid-item style="padding:2px;" v-for="(splist, index) of goodsList" :key="index" >
              <router-link :to='{path: "/goodsDetail", query: {goodsId:splist.goodsId}}' style="margin-bottom: 5px;">
                <van-image v-if="splist.goodsUrl != null" :src="IMG_SERVICE_ADDR + splist.goodsUrl"> </van-image>
                <van-image v-else :src="errorImg"> </van-image>
              </router-link>
              <div class="show-bottom">
                <p class="p2">{{splist.goodsName}}</p>
              </div>
              <div class="show-bottom">
                <p class="p3">￥{{splist.goodsPrices}}</p>
              </div>
              <div class="goods-tag">
                <van-tag plain type="danger">{{splist.sexTypeName}}款</van-tag>
                <van-tag plain type="primary">{{splist.goodsTypeName}}</van-tag>
                <van-tag plain type="success">{{splist.seasonTypeName}}</van-tag>
              </div>
            </van-grid-item>
          </van-grid>
        </van-list>
      </van-tab>
      <van-tab title="裤子">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-grid :border="false" :column-num="2" style="background:#e2e2e2;">
            <van-grid-item style="padding:2px;" v-for="(splist, index) of goodsList" :key="index" >
<!--              <router-link :to='' style="margin-bottom: 5px;">-->
                <van-image v-if="splist.goodsUrl != null" :src="IMG_SERVICE_ADDR + splist.goodsUrl"> </van-image>
                <van-image v-else :src="errorImg"> </van-image>
<!--              </router-link>-->
              <div class="show-bottom">
                <p class="p2">{{splist.goodsName}}</p>
              </div>
              <div class="show-bottom">
                <p class="p3">￥{{splist.goodsPrices}}</p>
              </div>
              <div class="goods-tag">
                <van-tag plain type="danger">{{splist.sexTypeName}}款</van-tag>
                <van-tag plain type="primary">{{splist.goodsTypeName}}</van-tag>
                <van-tag plain type="success">{{splist.seasonTypeName}}</van-tag>
              </div>
            </van-grid-item>
          </van-grid>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import NavBar from '@/components/navbar'
import https from '@/common/https.js'
import {IMG_SERVICE_ADDR} from '@/config/configConstant.js' // 常量参数
import errorImg from '@/assets/img/error.jpg'
export default {
  name: 'goods',
  components: {
    NavBar
  },
  data () {
    return {
      value: '',
      active: 0,
      IMG_SERVICE_ADDR: IMG_SERVICE_ADDR,
      errorImg: errorImg,
      schoolName: '',
      shopSchoolId: '',
      goodsList: [],
      offset: 0, // 分页页码
      limit: 10, // 分页数大小
      loading: false, // 加载中动画
      finished: false, // 分页完成
      postIng: false, // 请求数据状态
      sexType: '', // 性别筛选条件
      goodsType: '', // 上衣裤子筛选条件
      goodsName: '', // 商品名称筛选条件
      splists: [{
        goodsId: '01',
        goodsUrl: 'https://img.yzcdn.cn/vant/apple-2.jpg',
        goodsName: '2019款舒适青年版测试商品1...',
        sexTypeName: '男',
        seasonTypeName: '冬季',
        goodsTypeName: '上衣'
      }]
    }
  },
  activated () {},
  created () {
    this.schoolName = this.$route.query.schoolName
    this.shopSchoolId = this.$route.query.shopSchoolId
    this.goodsList.splice(0, this.goodsList.length) // 清除页面数据
    this.finished = false // 开启下拉分页
    this.postIng = true // 请求数据
    this.offset = 0 // 页面重置为0
    this.active = 0
    this.value = ''
    this.goodsName = ''
    this.sexType = ''
    this.goodsType = ''
    setTimeout(() => {
      this.getGoodsList()
      this.offset = 1
    }, 1000)
  },
  methods: {
    onSearch () { // 搜索按钮事件
      this.goodsName = this.value
      if (!this.postIng) { // 请求数据时不去刷新
        this.goodsList.splice(0, this.goodsList.length) // 清除页面数据
        this.finished = false // 开启下拉分页
        this.postIng = true // 请求数据
        this.offset = 0 // 页面重置为0
        let offset = this.offset
        console.log('搜索按钮点击请求数据111111')
        setTimeout(() => {
          this.getGoodsList()
          offset++
          this.offset = offset
        }, 1000)
      }
    },
    goBack () {
      this.$router.go(-1)
    },
    goDetail (goodsId) {
      this.$router.push({path: '/goodsDetail', query: {goodsId:goodsId}})
    },
    tabsOnClick (name, title) { // tab 切换刷新事件
      if (!this.postIng) { // 请求数据时不去刷新
        this.searchGoods(name)
        this.goodsList.splice(0, this.goodsList.length) // 清除页面数据
        this.finished = false // 开启下拉分页
        this.postIng = true // 请求数据
        this.offset = 0 // 页面重置为0
        let offset = this.offset
        console.log('tab点击请求数据111111')
        setTimeout(() => {
          this.getGoodsList()
          offset++
          this.offset = offset
        }, 1000)
      }
    },
    onLoad () { // 下拉刷新
      if (!this.postIng) { // 请求数据时不去刷新
        this.postIng = true
        let offset = this.offset
        console.log('请求数据111111')
        setTimeout(() => {
          this.getGoodsList()
          offset++
          this.offset = offset
        }, 1000)
      }
    },
    getGoodsList () { // 分页获取商品数据
      let params = {}
      params.shopSchoolId = this.shopSchoolId
      params.offset = this.offset * this.limit
      params.limit = this.limit
      params.sexType = this.sexType
      params.goodsType = this.goodsType
      params.goodsName = this.goodsName
      https.fetchPost('/goods/webs/findWebGoodsList', params).then((data) => {
        let goods = data.data
        if (goods !== null) {
          for (let i = 0; i < goods.length; i++) {
            this.goodsList.push(goods[i])
          }
          if (goods.length < this.limit) { // 数量不够时候停止分页
            this.finished = true
          }
        }
        console.log('请求数据成功222222')
        this.postIng = false
        this.loading = false
      }).catch(err => {
        console.log(err)
      })
    },
    searchGoods (id) {
      this.sexType = ''
      this.goodsType = ''
      if (id === 1) { // 男装
        this.sexType = '1'
      } else if (id === 2) { // 女装
        this.sexType = '2'
      } else if (id === 3) { // 上衣
        this.goodsType = '1'
      } else if (id === 4) { // 裤子
        this.goodsType = '2'
      }
    }
  }
}
</script>
<style scoped>
  .van-search {
    margin-top: 46px;
    padding: 5px 5px;
  }
  .van-nav-bar__text:active {
    background-color: #eff7fa;
  }
  .handImg {
    width: 30px;
    position: relative;
    top: 8px;
    border-radius: 50%;
  }
  .product {
    font-size: 16px;
    line-height: 50px;
    background: #fff;
    margin-top: 5px;
    margin-bottom: 1px;
  }
  .van-grid-item {
    border: 1px solid #f3f3f3;
  }
  .choose_type {
    width: 100%;
    height: 100px;
    margin-top: 1px;
    background-color: #fff;
  }
  .type {
    margin-top: 5%;
    width: 25%;
    float: left;
  }
  .type_img {
    width: 40%;
  }
  .img {
    position: relative;
    box-sizing: border-box;
    padding: 4px;
}
.show-bottom{
  width:100%;
  max-height: 80px;
}
.goods-tag {
  width: 100%;
  margin-top: 5px;
  text-align: left;
}
p {
  margin: 0;
  position: relative;
  color: #ff8400;
  float: left;
  font-size: .7rem;
}
p.p1 {
  position: relative;
  top: 5px;
  padding-left: 6%;
}
p.p2{
  font-size: 14px;
  text-align: left;
}
p.p3{
  font-size: 16px;
  text-align: left;
}
i.van-icon.van-icon-shopping-cart-o {
  width: 23%;
  float: right;
  /* text-align: -webkit-right; */
  font-size: 1.2rem;
  color: #ff8400;
}
.van-tabs__content {
    position: absolute;
    top: 0;
    width: 100%;
}
</style>
